<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="auto"
			>
				<el-form-item
					:label="$t('common.belong_merchant') + ':'"
					prop="merchantId"
				>
					<merchant-select
						v-model="queryData.merchantId"
					></merchant-select>
				</el-form-item>
				<el-form-item :label="$t('agent.login_time') + ':'">
					<el-date-picker
						v-model="loginTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						:clearable="true"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-input
						v-model="selectSearchVal"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
						:maxlength="maxlength"
					>
						<el-select
							slot="prepend"
							v-model="selectSearchType"
							style="width: 120px"
							:placeholder="$t('common.please_choose')"
							@change="selectSearchTypeHandle"
						>
							<el-option
								:label="$t('agent.agent_account')"
								:value="1"
							></el-option>
							<el-option
								:label="$t('agent.login_ip')"
								:value="2"
							></el-option>
							<el-option
								:label="$t('agent.ip_attribute')"
								:value="3"
							></el-option>
							<el-option
								:label="$t('agent.terminal_device')"
								:value="4"
							></el-option>
						</el-select>
					</el-input>
				</el-form-item>
				<el-form-item
					:label="$t('agent.login_status') + ':'"
					class="tagheight"
					prop="loginStatus"
				>
					<el-select
						v-model="queryData.loginStatus"
						style="width: 120px"
						clearable
						:placeholder="$t('common.all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in loginStatusType"
							:key="item.description"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="$t('agent.login_terminal') + ':'"
					class="tagheight"
					prop="deviceType"
				>
					<el-select
						v-model="queryData.deviceType"
						style="width: 220px"
						clearable
						:placeholder="$t('common.all')"
						:popper-append-to-body="false"
						multiple
						collapse-tags
					>
						<el-option
							v-for="item in loginDeviceType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item style="margin-left: 8px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>

			<div class="msgList">
				<p>
					<span>{{ $t('agent.data_update_time') }}：</span>
					<span>{{ now }}</span>
				</p>
				<p>
					{{ $t('agent.total_login_times') }}：
					{{ summary.count }}
					{{ $t('agent.time') }}
				</p>
			</div>
			<div class="msgList">
				<p>
					{{ $t('agent.login_success') }}：
					<span class="enableColor">
						{{ summary.successCount }}
					</span>
					{{ $t('agent.time') }}
				</p>
				<p>
					{{ $t('agent.login_fail') }}：
					<span class="redColor">{{ summary.failCount }}</span>
					{{ $t('agent.time') }}
				</p>
			</div>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					prop="loginTime"
					align="center"
					:label="$t('agent.login_time')"
					width="180"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.loginTime || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="loginStatus"
					align="center"
					:label="$t('agent.login_status')"
					width="100"
				>
					<template slot-scope="scope">
						{{
							typeFilter(scope.row.loginStatus, 'loginStatusType')
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					:label="$t('agent.agent_account')"
					width="120"
				>
					<template slot-scope="scope">
						<Copy
							v-if="!!scope.row.userName"
							:title="scope.row.userName"
							:copy="copy"
						>
							{{ scope.row.userName }}
						</Copy>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="accountType"
					align="center"
					:label="$t('common.belong_merchant')"
					width="120"
				>
					<template slot-scope="scope">
						{{ merchantFilter(scope.row.merchantId) }}
					</template>
				</el-table-column>
				<el-table-column
					prop="loginIp"
					align="center"
					:label="$t('agent.login_ip')"
					width="150"
				>
					<template slot="header">
						{{ $t('agent.login_ip') }}
						<br />
						{{ $t('common.risk_control_level') }}
					</template>
					<template slot-scope="scope">
						{{ scope.row.loginIp || '-' }}
						<br />
						<span class="redColor">
							{{ $t('common.risk_control_level') }}：{{
								scope.row.ipControlName || $t('agent.none')
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="ipAttribution"
					align="center"
					:label="$t('agent.ip_attribute')"
					width="150"
				>
					<template slot-scope="scope">
						{{ scope.row.ipAttribution || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="deviceType"
					align="center"
					:label="$t('agent.login_terminal')"
					width="150"
				>
					<template slot-scope="scope">
						{{
							typeFilter(scope.row.deviceType, 'loginDeviceType')
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="deviceNo"
					align="center"
					:label="$t('agent.terminal_device')"
					width="150"
				>
					<template slot="header">
						{{ $t('agent.terminal_device') }}
						<br />
						{{ $t('common.risk_control_level') }}
					</template>
					<template slot-scope="scope">
						{{ scope.row.deviceNo || '-' }}
						<br />
						<span class="redColor">
							{{ $t('common.risk_control_level') }}：{{
								scope.row.deviceNoControlName ||
									$t('agent.none')
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="loginReference"
					align="center"
					:label="$t('agent.login_url')"
					width="150"
				>
					<template slot-scope="scope">
						{{ scope.row.loginReference || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="browseContent"
					align="center"
					:label="$t('agent.device_version')"
					min-width="200"
				>
					<template slot-scope="scope">
						{{
							scope.row.browseContent === 'UNKNOWN'
								? '-'
								: scope.row.browseContent || '-'
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="loginError"
					align="center"
					:label="$t('common.remark')"
					width="150"
				>
					<template slot-scope="scope">
						{{ scope.row.loginError || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import { filterEmptyParams } from '@/utils'
import MainContent from '@/components/MainContent/index.vue'
const startTime = () =>
	dayjs()
		.startOf('day')
		.valueOf()
const endTime = () =>
	dayjs()
		.endOf('day')
		.valueOf()

export default {
	name: routerNames.agentLogin,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		this.loadData = this.throttle(this.loadData, 1000)
		this._changeTableSort = this.throttle(this._changeTableSort, 1000)
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			selectSearchVal: '',
			selectSearchType: 1,
			maxlength: 11,
			queryData: {},
			loginTime: [startTime(), endTime()],
			now: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
			summary: {
				count: 0,
				failCount: 0,
				successCount: 0
			},
			tableData: []
		}
	},
	computed: {
		loginDeviceType() {
			return this.globalDics.loginDeviceType || []
		},
		loginStatusType() {
			return this.globalDics.loginStatusType || []
		},
		accountType() {
			return this.globalDics.accountType || []
		}
	},
	mounted() {},
	methods: {
		selectSearchTypeHandle(val) {
			this.selectSearchVal = ''
			if (val === 1) {
				this.maxlength = 11
			} else if (val === 2) {
				this.maxlength = 15
			} else {
				this.maxlength = 50
			}
		},
		loadData() {
			this.loading = true

			this.queryData.userName = ''
			this.queryData.loginIp = ''
			this.queryData.ipAttribution = ''
			this.queryData.deviceNo = ''
			if (this.selectSearchType === 1) {
				this.queryData.userName = this.selectSearchVal
			} else if (this.selectSearchType === 2) {
				this.queryData.loginIp = this.selectSearchVal
			} else if (this.selectSearchType === 3) {
				this.queryData.ipAttribution = this.selectSearchVal
			} else if (this.selectSearchType === 4) {
				this.queryData.deviceNo = this.selectSearchVal
			}

			const create = this.loginTime || []
			const [startTime, endTime] = create
			let params = {
				...this.queryData,
				loginStartTime: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				loginEndTime: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			params = {
				...this.getParams(params)
			}
			this.$api
				.getProxyDetailProxyLoginLog(filterEmptyParams(params))
				.then((res) => {
					this.now = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
					if (res?.code === 200) {
						const { record, totalRecord, summary } = res.data || {}
						this.tableData = Array.isArray(record)
							? Object.freeze(record)
							: []
						this.total = totalRecord || 0
						this.summary = summary || {
							count: 0,
							failCount: 0,
							successCount: 0
						}
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.queryData = {}
			this.pageNum = 1
			this.selectSearchType = 1
			this.selectSearchVal = ''
			this.loginTime = [startTime(), endTime()]
			this.loadData()
		},
		_changeTableSort({ column, prop, order }) {
			if (prop === 'loginTime') {
				prop = 1
			}
			this.pageNum = 1
			this.queryData.orderKey = prop
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = 'asc'
			} else if (order === 'descending') {
				// 降序
				this.queryData.orderType = 'desc'
			} else {
				delete this.queryData.orderKey
				delete this.queryData.orderType
			}
			this.loadData()
		},
		enterSubmit() {
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .tagheight .el-tag {
	height: 24px;
	line-height: 24px;
	min-width: 60px;
}
::v-deep .el-input-group__prepend {
	background-color: #fff;
}
.msgList {
	font-size: 14px;
	display: flex;
	p {
		margin-right: 20px;
		line-height: 24px;
	}
	&:last-child p {
		margin-bottom: 15px;
	}
}
</style>
